import {
    API
} from "../../../utils/fireapi";
import {
    Config
} from "../../../utils/config";
import {
    Utils
} from "../../../utils/util";
// 小程序配置信息
const app = getApp()
Page({
    data: {
        // canvas组件用于图片操作,绘制\下载等
        canvasComponent: undefined,
        // 图片水印
        waterPic: "",
        // 文字水印(默认为小程序名称)
        waterText: "",
        // 上传到阿里云Oss文件地址
        ossImgUrl: "",
        // 用于显示的图片(带有水印)
        urlWithWater: "",
        // 转换后无水印图片
        urlNoWater: "",
        // 是否显示添加图片的按钮标识(界面上的"+"按钮)
        isShowAddPicBtn: true,
        // 选中的卡通化类型
        selected: "origin",
        // 卡通化选择索引
        index:0,
        // 从相册选择的原始图片
        sourceImg: undefined,
        //用于标识文件唯一性,支付成功后,相同标识的文件可以重复下载
        imgRandom: 0,
        //下载图片前处理函数()
        beforeFun: new Function(),
        
        // 是否显示等待页面
        loadModal: false,
        // 等待界面参数
        waitItem: {},
    },
    /** 从相册选择则图片进行处理 */
    chooseImage() {
        wx.removeStorageSync('animeImg');
        let _this = this;
        wx.chooseMedia({
            count: 1,
            mediaType: ['image'],
            sourceType: ['album'],
            sizeType: ['original','compressed'],
            success(res) {
                // 调用upload上传图片到阿里云Oss
                // let fileParam = {
                //     name: Utils.getUuid(4, 3) + Utils.getFileType(res.tempFiles[0].tempFilePath),
                //     src: res.tempFiles[0].tempFilePath
                // }
 
                _this.uploadImage(res.tempFiles[0].tempFilePath);

            }
        })
    },
    /**选中图片 */
    selecteStyle(e) {
        const algo = e.detail.data.id;
        if (this.data.sourceImg && this.data.ossImgUrl) {

            if (['anime', '3d', 'handdrawn', 'sketch', 'artstyle'].indexOf(algo) >= 0) {
                this.changeImgStyle(algo);
            } else {
                this.setData({
                    urlWithWater: this.data.sourceImg
                })

            }
        }
    },
    /**转换图片风格 */
    changeImgStyle(algo) {
        // 首先查看缓存中是否已有转换后的图片
        // 如果有直接使用，没有则调用aip进行转换
        //缓存中的对象结构：{风格化名：{img：'风格化后的图片'，imgWithWater：'带水印的风格化图片'}，{}}
        let animeImg = wx.getStorageSync('animeImg');

        if (animeImg && animeImg[algo]) {
            this.setData({
                urlWithWater: animeImg[algo]['imgWithWater'], // 直接返回风格化后的图片
                urlNoWater: animeImg[algo]['img'],
            });
        } else {
            this.showWaitModal();
            // 调用API获取风格化后的图片
            const ossImgUrl = this.data.ossImgUrl;
            
            API.getAnimeImage(ossImgUrl, algo).then(res => {
                const algoImg = res.ImageURL.replace("http://","https://");

                // 添加水印
                API.drawWater(this.data.canvasComponent, algoImg, this.data.waterPic, this.data.waterText).then(algoImgWithWater => {
                    this.setData({
                        urlWithWater: algoImgWithWater,
                        urlNoWater: algoImg
                    })
                    // 保存风格化后图片到缓存
                    const afterAlgo = {
                        img: algoImg,
                        imgWithWater: algoImgWithWater
                    }
                    if (animeImg) {
                        animeImg[algo] = afterAlgo
                    } else {
                        animeImg = {
                            [algo]: afterAlgo
                        }
                    }
                    wx.setStorageSync('animeImg', animeImg)
                    this.showWaitModal(false)
                }).catch(err => {
                    this.showWaitModal(false);
                    this.showError({ title: err, icon: 'error', duration: 2000, mask: true });
                })

            }).catch(err => {
                this.showWaitModal(false);
                this.showError({ title: err, icon: 'error', duration: 2000, mask: true });
            })
        }
    },
    /**上传选择的图片到OSS待处理,animeFlag:上传后是否调用风格化 */
    uploadImage(image, animeFlag = false) {
        this.showWaitModal();
        // this.compressImage(canvas, imgSrc, 1279, 1279).then(res => {
            // let fileParam = {
            //     name: Utils.getUuid(4, 3) + Utils.getFileType(res),
            //     src: res
            // }
        let fileParam = {}
        API.compressImage(this.data.canvasComponent,image,2000,2000).then(res=>{
            fileParam = {
                name: Utils.getUuid(4, 3) + Utils.getFileType(res),
                src: res
            }
            return API.uploadFile(fileParam);
        }).then(imgUrl => {
            this.setData({
                ossImgUrl: imgUrl,
                sourceImg: fileParam.src,
                urlWithWater: fileParam.src,
                index:0,
                imgRandom: (Math.random() * 1000).toFixed(0).toString()
            })
            this.showWaitModal(false);
        }).catch(err => {
            this.showWaitModal(false);
            this.showError({ title: err, icon: 'error', duration: 2000, mask: true });
        })
    },
    // 设置等待界面的显示或隐藏
    showWaitModal(flag = true) {
        this.setData({
            loadModal: flag
        })
    },
    /** 下载组件下载前的回调函数,对图片进行处理 */
    beforeDownload(imgUrl) {
        return new Promise((resolve, reject) => {
            
            wx.downloadFile({
                url: imgUrl,
                success: function (res) {
                    let img = res.tempFilePath;
                    resolve(img);
                },
                fail: function (err) {
                    reject(err);
                    this.showError({ title: err, icon: 'error', duration: 2000, mask: true });
                }
            })
        })
    },
    /** 下载完成后处理完成事件 */
    complete(event) {
        let title = "保存成功";
        let icon = 'success';
        if (!event.detail.success) {
            title = "保存失败";
            icon = 'error'
        }
        wx.showToast({
            title: title,
            icon: icon,
            duration: 2000,
            mask: true
        })
    },
    onLoad(options) {
        wx.removeStorageSync('animeImg');
        const serverData = app.globalData.serverData;
        const waitItem = {
            img: serverData.config.waitPageImg,
            text: serverData.config.waitPageTxt
        };
        const identity = serverData.funcPrice[Config.IDENTITY_ANIME];
        this.setData({
            identity: identity,
            waitItem: waitItem,
            waterText: serverData.config.mpName,
            beforeFun: this.beforeDownload
        })
    },

    onReady() {
        // 获取自定义canvas组件
        this.data.canvasComponent = this.selectComponent("#human-canvas");
    },

})